<template>
<div>
        <button @click="add()">添加</button>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[2,100, 200, 300, 400]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
          <el-table v-loading="loading" :data="advertisingList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="主键ID" align="center" prop="id"  />
            <el-table-column
                prop="client"
                label="客户端">
              <!--template:模板 自定义展示内容-->
              <template slot-scope="scope">
                {{scope.row.client===1?'快递员':scope.row.client===2?'会员端':'智能柜终端'}}
              </template>
            </el-table-column>
            <el-table-column
                prop="announcement"
                label="公告类型">
              <!--template:模板 自定义展示内容-->
              <template slot-scope="scope">
                {{scope.row.announcement===1?'系统通知':'活动通知'}}
              </template>
            </el-table-column>
            <el-table-column
                prop="language"
                label="语言">
              <!--template:模板 自定义展示内容-->
              <template slot-scope="scope">
                {{scope.row.language===1?'中文':'English'}}
              </template>
            </el-table-column>
            <el-table-column label="广播标题" align="center" prop="advertisement" />
            <el-table-column label="广播内容" align="center" prop="announcementcontent" />
            <el-table-column
                prop="detrusion"
                label="推出方式">
              <!--template:模板 自定义展示内容-->
              <template slot-scope="scope">
                {{scope.row.detrusion===1?'即使推送':'定时推送'}}
              </template>
            </el-table-column>
            <el-table-column label="推出时间" align="center" prop="effluxtime" width="180"/>
            <el-table-column
                prop="status"
                label="状态">
              <!--template:模板 自定义展示内容-->
              <template slot-scope="scope">
                {{scope.row.status===1?'生效中':scope.row.status===2?'已下架':'已过期'}}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="creation" width="180"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-share"
                  @click="xiang(scope.row)"
              >详细</el-button>
                <div v-if="scope.row.status===3">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                >删除</el-button>
                </div>
                <div v-if="scope.row.status===3">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-s-promotion"
                    @click="yuyu(scope.row)"
                >重新推送</el-button>
                </div>
                <div v-if="scope.row.status===2">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-circle-plus"
                    @click="shang(scope.row)"
                >上架</el-button>
                </div>
                <div v-if="scope.row.status===1">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-remove"
                    @click="xia(scope.row)"
                >下架</el-button>
                </div>
                <div v-if="scope.row.status===1">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-remove"
                    @click="guo(scope.row)"
                >过期</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="客户端" prop="client">
              <template>
                <el-radio v-model="form.client" label="1">快递员端</el-radio>
                <el-radio v-model="form.client" label="2">会员端</el-radio>
                <el-radio v-model="form.client" label="3">智能柜终端</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="公告类型" prop="Announcement">
              <template>
                <el-radio v-model="form.announcement" label="1">系统通知</el-radio>
                <el-radio v-model="form.announcement" label="2">活动通知</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="语言类型" prop="language">
              <template>
                <el-radio v-model="form.language" label="1">中文</el-radio>
                <el-radio v-model="form.language" label="2">English</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="广播标题" prop="advertisement">
              <el-input v-model="form.advertisement" placeholder="请输入广播标题" />
            </el-form-item>
            <el-form-item label="广播内容">
              <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="form.announcementcontent"
                  maxlength="50"
                  show-word-limit
              />
            </el-form-item>
            <el-form-item label="推出方式" prop="detrusion">
              <template>
                <el-radio v-model="form.detrusion" label="1">即使推送</el-radio>
                <el-radio v-model="form.detrusion" label="2">即使推送</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="推出时间" prop="effluxtime">
              <el-date-picker
                  v-model="form.effluxtime"
                  type="date"
                  placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog :title="title" :visible.sync="open1" width="500px" append-to-body>
          <el-descriptions title="用户信息">
            <el-descriptions-item label="ID">
            {{this.form.id}}
            </el-descriptions-item><br>
            <el-descriptions-item label="客户端">
                {{this.form.client===1?'快递员':this.form.client===2?'会员端':'智能柜终端'}}
            </el-descriptions-item><br>
            <el-descriptions-item label="类型">
              {{this.form.announcement===1?'系统通知':'活动通知'}}
            </el-descriptions-item><br>
            <el-descriptions-item label="语言">
              {{this.form.language===1?'中文':'English'}}
            </el-descriptions-item><br>
            <el-descriptions-item label="操作">
              <div v-if="this.form.status===1">
                <h6>下架</h6>
                <h6>重新推出</h6>
              </div>
              <div v-if="this.form.status===2">
                 <h6>上架</h6>
              </div>
              <div v-if="this.form.status===3">
                  <h6>删除</h6>
              </div>
            </el-descriptions-item><br>
            <el-descriptions-item label="广播标题">
              {{this.form.advertisement}}
            </el-descriptions-item><br>
            <el-descriptions-item label="广播内容">
             {{this.form.announcementcontent}}
            </el-descriptions-item><br>
            <el-descriptions-item label="创建时间">
             {{this.form.creation}}
            </el-descriptions-item><br>
            <el-descriptions-item label="推广时间">
              {{this.form.effluxtime}}
            </el-descriptions-item><br>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
          </div>
          </el-descriptions>
        </el-dialog>
        <el-dialog :title="title" :visible.sync="open2" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="推出时间" prop="shijian">
            <el-date-picker
                v-model="shijian"
                type="date"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="chongxintuisong()">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog :title="title" :visible.sync="open3" width="500px" append-to-body>
          <h1>是否进行删除、下架、上架，下架等操作</h1>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="shangjia()">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog :title="title" :visible.sync="open4" width="500px" append-to-body>
          <h1>是否进行删除、下架、上架，下架等操作</h1>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="xiajia()">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog :title="title" :visible.sync="open6" width="500px" append-to-body>
          <h1>是否进行删除、下架、上架，下架等操作</h1>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="guoqi()">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
</div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      shijian:null,
      idg:[],
      //开关
      open1:false,
      open3:false,
      open4:false,
      open5:false,
      open6:false,
      // 非单个禁用
      single: true,
      open2:false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公告表格数据
      advertisingList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 2,
        client: null,
        announcement: null,
        language: null,
        advertisement: null,
        announcementcontent: null,
        detrusion: null,
        effluxtime: null,
        status: null,
        creation: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      activeIndex: '7',
      name: sessionStorage.getItem("name"),
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSelect(key) {
      console.log(key);
    },
    handleUpdate(){},
    handleDelete(data){
      this.form=data;
      axios.post("http://localhost:10060/advertising/shan",this.form).then(res =>{
        console.log(res)
        this.$message({
          message: '恭喜你，修改成功',
          type: 'success'
        });
        this.getList();
        this.reset();
      })
    },
    shouye(){
      this.$router.push(
          {path: "/HomeIndex"}
      )
    },
    shang(data){
      this.form=data;
      this.open3=true;
    },
    xia(data){
      this.form=data;
      this.open4=true;
    },
    guo(data){
      this.form=data;
      this.open6=true;
    },
    dshezhi(){
      this.$router.push(
          {path: "/outkey"}
      )
    },
    yuyu(data){
      this.form=data;
      this.open2=true;
    },
    xitong(){
      this.$router.push(
          {path: "/OutSystems"}
      )
    },
    bao(){
      this.$router.push(
          {path: "/OutPackage"}
      )
    },
    shangjia(){
      axios.post("http://localhost:10060/advertising/shangjia", this.form).then(res =>{
        console.log(res)
        this.$message({
          message: '恭喜你，修改成功',
          type: 'success'
        });
        this.open3=false;
        this.getList();
        this.reset();
      })
    },
    xiajia(){
      axios.post("http://localhost:10060/advertising/xiajia", this.form).then(res =>{
        console.log(res)
        this.$message({
          message: '恭喜你，修改成功',
          type: 'success'
        });
        this.open4=false;
        this.getList();
        this.reset();
      })
    },
    rr(data){
      this.form=data;
      this.open3=true;
    },
    guoqi(){
      axios.post("http://localhost:10060/advertising/guoqi", this.form).then(res =>{
        console.log(res)
        this.$message({
          message: '恭喜你，修改成功',
          type: 'success'
        });
        this.open6=false;
        this.getList();
        this.reset();
      })
    },
    chongxintuisong(){
      this.form.effluxtime=this.shijian;
      axios.post("http://localhost:10060/advertising/chongxintuisong",this.form).then(res =>{
        console.log(res)
        this.$message({
          message: '恭喜你，从新推送成功',
          type: 'success'
        });
        this.open2=false;
        this.getList();
        this.reset();
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    add(){
      this.open=true;
    },
    ben(){
      this.open2=true;
    },
    submitForm(){
      axios.post("http://localhost:10060/advertising/add",this.form).then(res =>{
        console.log(res)
        this.$message({
          message: '恭喜你，添加成功',
          type: 'success'
        });
        this.open=false;
        this.getList();
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val;
      this.getList();
    },
    xiang(data){
      this.open1=true;
        this.form=data;
    },
    cancel(){
      this.open=false;
      this.open3=false;
      this.open4=false;
      this.open5=false;
      this.open6=false;
      this.open1=false;
      this.open2=false;
      this.getList();
    },
    ba(){
      this.$router.push(
          {path: "/dropdown"}
      )
    },
    getList(){
      this.loading=true;
      axios.post("http://localhost:10060/advertising/list",this.queryParams).then(response =>{
        console.log(response)
        this.advertisingList = response.data.list;
        console.log(this.advertisingList)
        this.total = response.data.total;
        this.loading = false;
      })
    },
    reset() {
      this.form = {
        id: null,
        client: null,
        Announcement: null,
        language: null,
        advertisement: null,
        Announcementcontent: null,
        detrusion: null,
        effluxtime: null,
        status: null,
        creation: null
      };
    },
    noticec(){
      this.$router.push(
          {path: "/homePage"}
      )
    },
  },

};
</script>

<style lang="less">
#app {
  margin-top: 0;
}

.home-container {
  height: 100%;
}

.el-header {
  background-color: #545c64;
  display: flex; //设置显示为flex布局
  justify-content: space-between; //设置为flex左右布局
  padding-left: 0; //左内边距为0（Logo贴左边）
  align-items: center; //元素上下居中（防止右边按钮贴上下边）
  color: #fff;
  font-size: 18px;

  > div {
    //内嵌的div样式
    display: flex;
    align-items: center; //Logo和文字上下居中
    #fontLogo {
      width: 200px;
      margin-left: 10px; //文字左侧设置间距，防止与Logo紧贴
    }
    #fontName {
      width: 100px;
      margin-right: 10px;
    }
  }
}

#indexMenu {
  width: 100%;
}

.el-menu {
  background-color: #545c64;
}

.el-aside {
  background-color: #545c64;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

.el-main {
  background-color: #eaedf1;
  height: 1000px;
}
</style>
